<template>
	<div class="container">
		<div style="display: flex">
			<dv-decoration-1 style="width: 10%; height: 50px" @click="$route.go(-1)" />
		</div>
		<div>
			<div id="m1" ref="m1" style="width: 100%; height: 50vh"></div>
			<div id="m2" ref="m2" style="width: 100%; height: 50vh"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, defineExpose, watch, onMounted, inject } from 'vue'
import * as echarts from 'echarts'
import router from '@/router'
const $route = router
onMounted(() => {
	var chartDom = document.getElementById('m1')
	var myChart = echarts.init(chartDom)
	var option

	option = {
		color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
		title: {
			text: '渐变堆叠面积图',
			background: 'white'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
		},
		toolbox: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: 'Line 1',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(128, 255, 165)'
						},
						{
							offset: 1,
							color: 'rgb(1, 191, 236)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [140, 232, 101, 264, 90, 340, 250]
			},
			{
				name: 'Line 2',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(0, 221, 255)'
						},
						{
							offset: 1,
							color: 'rgb(77, 119, 255)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [120, 282, 111, 234, 220, 340, 310]
			},
			{
				name: 'Line 3',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(55, 162, 255)'
						},
						{
							offset: 1,
							color: 'rgb(116, 21, 219)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [320, 132, 201, 334, 190, 130, 220]
			},
			{
				name: 'Line 4',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(255, 0, 135)'
						},
						{
							offset: 1,
							color: 'rgb(135, 0, 157)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [220, 402, 231, 134, 190, 230, 120]
			},
			{
				name: 'Line 5',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				label: {
					show: true,
					position: 'top'
				},
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(255, 191, 0)'
						},
						{
							offset: 1,
							color: 'rgb(224, 62, 76)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [220, 302, 181, 234, 210, 290, 150]
			}
		]
	}

	option && myChart.setOption(option)

	var app = {}

	var chartDom1 = document.getElementById('m2')
	var myChart1 = echarts.init(chartDom1)
	var option1

	const names = ['Orange', 'Tomato', 'Apple', 'Sakana', 'Banana', 'Iwashi', 'Snappy Fish', 'Lemon', 'Pasta']
	const years = ['2001', '2002', '2003', '2004', '2005', '2006']
	const shuffle = array => {
		let currentIndex = array.length
		let randomIndex = 0
		while (currentIndex > 0) {
			randomIndex = Math.floor(Math.random() * currentIndex)
			currentIndex--
			;[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]
		}
		return array
	}
	const generateRankingData = () => {
		const map = new Map()
		const defaultRanking = Array.from({ length: names.length }, (_, i) => i + 1)
		for (const _ of years) {
			const shuffleArray = shuffle(defaultRanking)
			names.forEach((name, i) => {
				map.set(name, (map.get(name) || []).concat(shuffleArray[i]))
			})
		}
		return map
	}
	const generateSeriesList = () => {
		const seriesList = []
		const rankingMap = generateRankingData()
		rankingMap.forEach((data, name) => {
			const series = {
				name,
				symbolSize: 20,
				type: 'line',
				smooth: true,
				emphasis: {
					focus: 'series'
				},
				endLabel: {
					show: true,
					formatter: '{a}',
					distance: 20
				},
				lineStyle: {
					width: 4
				},
				data
			}
			seriesList.push(series)
		})
		return seriesList
	}
	option1 = {
		title: {
			text: '凹凸图'
		},
		tooltip: {
			trigger: 'item'
		},
		grid: {
			left: 30,
			right: 110,
			bottom: 30,
			containLabel: true
		},
		toolbox: {},
		xAxis: {
			type: 'category',
			splitLine: {
				show: true
			},
			axisLabel: {
				margin: 30,
				fontSize: 16
			},
			boundaryGap: false,
			data: years
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				margin: 30,
				fontSize: 16,
				formatter: '#{value}'
			},
			inverse: true,
			interval: 1,
			min: 1,
			max: names.length
		},
		series: generateSeriesList()
	}

	option1 && myChart1.setOption(option1)
})
</script>

<script>
export default {
	name: 'DataLine'
}
</script>

<style scoped>
.container {
	height: 100vh;
	width: 100%;
	background-color: #ebebeb;
}
</style>
